<template>
  <div class="personal layout-pd">
    <el-row>
      <!-- 个人信息 -->
      <el-col :xs="24" :sm="12">
        <el-card shadow="hover" header="个人信息">
          <div class="personal-user">
            <div class="personal-user-left">
              <div class="h100 personal-user-left-upload" @click="onOpenChoiceFile">
                <el-avatar :src="STATIC_URL + state.personalForm.avatar" :size="50" shape="circle"/>
              </div>
            </div>
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24" class="personal-title mb18"
                >{{ currentTime }}，{{ state.personalForm.username }}，生活变的再糟糕，也不妨碍我变得更好！
                </el-col>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" :sm="8" class="personal-item mb6">
                      <div class="personal-item-label">用户名：</div>
                      <div class="personal-item-value">{{ state.personalForm.username }}</div>
                    </el-col>
                    <el-col :xs="24" :sm="16" class="personal-item mb6">
                      <div class="personal-item-label">{{ $t('message.user.sf') }}：</div>
                      <div class="personal-item-value">{{ state.personalForm.roleName }}</div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" :sm="8" class="personal-item mb6">
                      <div class="personal-item-label">登录IP：</div>
                      <div class="personal-item-value">{{ state.personalForm.lastLoginIp }}</div>
                    </el-col>
                    <el-col :xs="24" :sm="16" class="personal-item mb6">
                      <div class="personal-item-label">登录时间：</div>
                      <div class="personal-item-value">{{ state.personalForm.lastLoginDate }}</div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 消息通知 -->
      <el-col :xs="24" :sm="6" class="pl15 personal-info">
        <el-card shadow="hover">
          <template #header>
            <span>消息通知</span>
            <span class="personal-info-more">更多</span>
          </template>
          <div class="personal-info-box">
            <!--            <ul class="personal-info-ul">-->
            <!--              <li v-for="(v, k) in state.newsInfoList" :key="k" class="personal-info-li">-->
            <!--                <a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>-->
            <!--              </li>-->
            <!--            </ul>-->
          </div>
        </el-card>
      </el-col>

      <!-- 更新信息 -->
      <el-col :xs="24" :sm="6" class="pl15">
        <el-card shadow="hover" class="personal-edit" header="更新信息">
          <div class="personal-edit-info">
            <div class="personal-edit-title mb15">账号安全</div>
            <div class="personal-edit-safe-box">
              <div class="personal-edit-safe-item">
                <div class="personal-edit-safe-item-left">
                  <div class="personal-edit-safe-item-left-label">账户密码</div>
                  <div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
                </div>
                <div class="personal-edit-safe-item-right">
                  <el-button text type="primary" @click="onOpenPwd">立即修改</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card shadow="hover" class="mt15 personal-edit" header="操作日志">
          <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
            <el-table-column prop="operator" label="操作人" show-overflow-tooltip width="150"></el-table-column>
            <el-table-column prop="operationType" label="操作类型" show-overflow-tooltip width="150"></el-table-column>
            <el-table-column prop="msg" label="操作内容" show-overflow-tooltip width="400">
              <template #default="scope">
                <div class="action-msg">{{ scope.row.msg }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="url" label="接口url" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="操作状态" show-overflow-tooltip>
              <template #default="scope">
                <el-tag v-if="scope.row.status == 'success'">成功</el-tag>
                <el-tag v-else @click="viewErrMsg(scope.row.errMsg)" class="cursor-pointer" type="danger">失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="clientIp" label="客户端ip" show-overflow-tooltip></el-table-column>
            <el-table-column prop="localIp" label="服务ip" show-overflow-tooltip></el-table-column>
            <el-table-column prop="source" label="来源" show-overflow-tooltip>
              <template #default="scope">
                <el-tag v-if="scope.row.source == 'server'">管理端</el-tag>
                <el-tag v-else>客户端</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间" show-overflow-tooltip></el-table-column>
            <!--            <el-table-column label="操作" width="100">-->
            <!--              <template #default="scope">-->
            <!--                <el-button size="small" text type="primary" @click="onOpen(scope.row.id)">查看</el-button>-->
            <!--                <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>
          <div class="pagination-container">
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                :page-sizes="[10, 15, 20, 30, 50, 100]"
                v-model:current-page="state.tableData.paging.currentPage"
                background
                v-model:page-size="state.tableData.paging.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.tableData.paging.totalCount"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <UpdatePwdDialog ref="UpdatePwdDialogRef"></UpdatePwdDialog>
    <FileChoice ref="FileChoiceRef" @choice-file="choiceFileCallBack"></FileChoice>
  </div>
</template>

<script setup lang="ts" name="personal">
import {reactive, computed, onMounted, defineAsyncComponent, ref} from 'vue';
import {formatAxis} from '/@/utils/formatTime';
import {useUserInfo} from '/@/stores/userInfo';
import {storeToRefs} from 'pinia';
import {STATIC_URL} from '/@/utils/config';
import {useLoginApi} from '/@/api/login';
import {ActionLogApi} from '/@/api/log/action/index';
import messageUtils from '/@/utils/messageUtils';
import msg from "/@/utils/messageUtils";

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();
const UpdatePwdDialog = defineAsyncComponent(() => import('./dialog.vue'));
const UpdatePwdDialogRef = ref();
const stores = useUserInfo();
const {userInfos} = storeToRefs(stores);
// 定义变量内容
const state = reactive({
  personalForm: {
    lastLoginDate: '',
    lastLoginIp: '',
    roleName: '',
    username: '',
    avatar: '',
  },
  tableData: {
    data: [],
    total: 0,
    loading: false,
    paging: {
      currentPage: 1,
      pageSize: 15,
      totalCount: 0,
      totalPages: 0,
    },
  },
});

// 当前时间提示语
const currentTime = computed(() => {
  return formatAxis(new Date());
});

const initUserInfos = async () => {
  try {
    const {data} = await useLoginApi().personal();
    console.log('详细信息： ', data);
    state.personalForm = data;
  } catch (error) {
    messageUtils().error('查询详细信息失败，稍后重试');
  }
};

const onOpenPwd = () => {
  UpdatePwdDialogRef.value.openDialog();
};


const onOpenChoiceFile = () => {
  FileChoiceRef.value.openFileChoiceDialog();
}

const choiceFileCallBack = async (cfi: ChoiceFileInfo[]) => {
  // state.ruleForm.image = cfi[0].visitRelativePath;
  state.personalForm.avatar = cfi[0].visitRelativePath
  await useLoginApi().updateAvatar({
    avatar: cfi[0].visitRelativePath
  })
}
const getTableData = async () => {
  try {
    const {data} = await ActionLogApi().search_own({
      offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
      limit: state.tableData.paging.pageSize,
    });
    state.tableData.data = data.datas;
    state.tableData.paging.currentPage = data.paging.currentPage;
    state.tableData.paging.totalCount = data.paging.totalCount;
    console.log('result: ', data);
  } catch (e) {
    console.log('error: ', e);
    msg().error('查询失败，请稍后重试');
  }
};
// 分页改变
const onHandleSizeChange = (pageSize: number) => {
  state.tableData.paging.pageSize = pageSize;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
  state.tableData.paging.currentPage = currentPage;
  getTableData();
};

onMounted(() => {
  initUserInfos();
  getTableData()
});
</script>

<style scoped lang="scss">
@import '../../theme/mixins/index.scss';

.personal {
  .personal-user {
    height: 130px;
    display: flex;
    align-items: center;

    .personal-user-left {
      width: 100px;
      height: 130px;
      border-radius: 3px;

      :deep(.el-upload) {
        height: 100%;
      }

      .personal-user-left-upload {
        display: flex;
        align-items: center;
        justify-content: center;
        //img {
        //	width: 100%;
        //	height: 100%;
        //	border-radius: 3px;
        //}
      }
    }

    .personal-user-right {
      flex: 1;
      padding: 0 15px;

      .personal-title {
        font-size: 18px;
        @include text-ellipsis(1);
      }

      .personal-item {
        display: flex;
        align-items: center;
        font-size: 13px;

        .personal-item-label {
          color: var(--el-text-color-secondary);
          @include text-ellipsis(1);
        }

        .personal-item-value {
          @include text-ellipsis(1);
        }
      }
    }
  }

  .personal-info {
    .personal-info-more {
      float: right;
      color: var(--el-text-color-secondary);
      font-size: 13px;

      &:hover {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

    .personal-info-box {
      height: 130px;
      overflow: hidden;

      .personal-info-ul {
        list-style: none;

        .personal-info-li {
          font-size: 13px;
          padding-bottom: 10px;

          .personal-info-li-title {
            display: inline-block;
            @include text-ellipsis(1);
            color: var(--el-text-color-secondary);
            text-decoration: none;
          }

          & a:hover {
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
      }
    }
  }

  .personal-recommend-row {
    .personal-recommend-col {
      .personal-recommend {
        position: relative;
        height: 100px;
        border-radius: 3px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
          i {
            right: 0px !important;
            bottom: 0px !important;
            transition: all ease 0.3s;
          }
        }

        i {
          position: absolute;
          right: -10px;
          bottom: -10px;
          font-size: 70px;
          transform: rotate(-30deg);
          transition: all ease 0.3s;
        }

        .personal-recommend-auto {
          padding: 15px;
          position: absolute;
          left: 0;
          top: 5%;
          color: var(--next-color-white);

          .personal-recommend-msg {
            font-size: 12px;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .personal-edit {
    .personal-edit-title {
      position: relative;
      padding-left: 10px;
      color: var(--el-text-color-regular);

      &::after {
        content: '';
        width: 2px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: var(--el-color-primary);
      }
    }

    .personal-edit-safe-box {
      border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
      padding: 15px 0;

      .personal-edit-safe-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .personal-edit-safe-item-left {
          flex: 1;
          overflow: hidden;

          .personal-edit-safe-item-left-label {
            color: var(--el-text-color-regular);
            margin-bottom: 5px;
          }

          .personal-edit-safe-item-left-value {
            color: var(--el-text-color-secondary);
            @include text-ellipsis(1);
            margin-right: 15px;
          }
        }
      }

      &:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}

.personal-edit-info {
  height: 130px;
}
</style>
